<template>
  <el-card>
    <div id="container"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";

onMounted(() => {
  const script = document.createElement("script");
  // 回调函数要求：必须是一个在全局作用域的函数
  script.src =
    "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=y3SFZit5R9YvmhfcUO2WfwKCZSS1AWR1&callback=initMap";
  // 全局方法
  window.initMap = () => {
    // 当百度地图js文件加载完成，再触发的函数
    // 创建地图实例
    const map = new BMapGL.Map("container");
    // 设置中心点坐标
    const point = new BMapGL.Point(114.1, 22.54);
    // 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 12);
    // 设置地图类型
    // map.setMapType(BMAP_EARTH_MAP);
    const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
  // 添加body中生效
  document.body.appendChild(script);
});
</script>

<style scoped>
#container {
  height: 600px;
}
</style>
